<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div[id="app"] {
            background-color: red;
        }
        
        li[name='active'] {
            border: 1px double rgb(10, 166, 238);
            margin: 14px;
            padding: 14px;
        }
    </style>
</head>

<body>
    <div class="c" id="app">
        <h1>name</h1>
        <h2>age</h2>
        <h3>addr</h3>
    </div>
    <div class="c">
        <h1></h1>
        <h1></h1>
        <h1></h1>
    </div>
    <ul>
        <li class="nav" onclick="changeActive(event)" name="active"><a href="#">语法</a></li>
        <li class="nav" onclick="changeActive(event)"><a href="#">例子</a></li>
        <li class="nav" onclick="changeActive(event)"><a href="#">规范</a></li>
    </ul>
    <script>
        // document.querySelector("h1")
        // const div = document.getElementById("app");
        // const p = document.createElement("p");

        // div.querySelector("h1")

        // p.append("test")
        // div.append(p)

        // div.addEventListener('click', () => {
        //     alert("点击了div")
        // })
        // console.log(div.hasAttribute("class"))

        // div.setAttribute("name", "robin");
        // div.removeAttribute("class  ")


        // const divs = document.getElementsByClassName("c");

        // console.log(div.outerHTML)

        function changeActive(e) {
            // console.log(e.target)
            const lis = document.querySelectorAll(".nav");
            // console.log(lis)
            lis.forEach((i) => {
                // console.log(i)
                i.removeAttribute("name");
            })

            e.target.setAttribute("name", "active")
        }
    </script>
</body>

</html>